<template>
	<div style="background-color: white;">
	      <section style="height: 3.2rem;background-color: white;"></section>
	      <section class="impro-info">
	      		<!--<section class="impro-icon">
	      			<mu-icon  value="email"  color="orange700"/>
	      		</section>-->
	      		<span class="impro-title">邮箱账号</span>
	      		<section style="flex: 3.8;">
	      			<input v-model="emailAccount" class="impro-input" type="text" @blur="checkFormat()"  />
	      		</section>
	      		<section style="flex: 2.7;">
	      			<section v-show="isCheck && isCorrect" class="check-prompt" >
	      				<mu-icon  value="check_circle"  color="green"/>
	      				<span style="margin-left: 0.5rem;">此邮箱可以使用</span>
	      			</section>
	      			<section v-show="isCheck && !isCorrect" class="check-prompt" >
	      				<mu-icon  value="error"  color="red"/>
	      				<span style="margin-left: 0.5rem;">{{checkMessage}}</span>
	      			</section>
	      			
	      		</section>
	      </section>
	      <section class="impro-info">
	      		<!--<section class="impro-icon">
	      			<mu-icon  value="phone_android"  color="#99cef8"/>
	      		</section>-->
	      		<span class="impro-title">手机号码</span>
	      		<section style="flex: 3.8;">
	      			<input v-model="phoneNumber" class="impro-input" type="text" @blur="checkPhoneNo()"  />
	      		</section>
	      		<section style="flex: 2.7;">
	      			<section v-show="isPhone && isPhoneNo" class="check-prompt" >
	      				<mu-icon  value="check_circle"  color="green"/>
	      				<span style="margin-left: 0.5rem;">此号码可以使用</span>
	      			</section>
	      			<section v-show="isPhone && !isPhoneNo" class="check-prompt" >
	      				<mu-icon  value="error"  color="red"/>
	      				<span style="margin-left: 0.5rem;">{{phoneMessage}}</span>
	      			</section>
	      		</section>
	      </section>
	      <section class="impro-info">
	      		<!--<section class="impro-icon">
	      			<mu-icon  value="account_circle"  color="#429cce"/>
	      		</section>-->
	      		<span class="impro-title">用户编号</span>
	      		<section style="flex: 5;">
	      			<input class="impro-input" type="text"  />
	      		</section>
	      </section>
	      
	      <section style="width: 100%;display: flex;justify-content: center;align-items: center;margin: 2rem 0;">
	      		<mu-flat-button :disabled="isCorrect && isPhoneNo" class="jumpBtn" labelClass="mu-label" label="进入首页" @click="gotoAddress('/index')" />
		  		</mu-flat-button>
	      </section>
	      
	</div>
</template>

<script>
	export default{
		data(){
			return{
				emailAccount:'',
				phoneNumber:'',
//				regular:/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
				regular:/^[A-Za-z0-9]+([-_.][A-Za-zd]+)*@([a-zA-Z0-9]+[-.])+[A-Za-zd]{2,5}$/,
				phoneRegular:/^[1][3,4,5,7,8][0-9]{9}$/,
//				regular:/^([\w\.\-]+)\@(\w+)(\.([\w^\_]+)){1,2}$/,
				isCheck:false,
				isCorrect:false,
				checkMessage:'',
				isPhone:false,
				isPhoneNo:false,
				phoneMessage:''
			}
		},
		mounted(){
			localStorage.emailInfo='abc@163.com'
			localStorage.phoneNumber='18764156318'
//			this.emailAccount=localStorage.emailInfo
//			var regular=/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
			
		},
		watch:{
			emailAccount(val1,Val2){
//				this.checkFormat(val1)
			},
			phoneNumber(val1,Val2){
				if(val1.length>11){
					this.phoneNumber=val1.slice(0,11)
				}
			}
		},
		methods:{
			isExistence(){
				
			},
			checkFormat(data){
				if(this.emailAccount!=''){
					this.isCheck=true
					if(this.regular.exec(this.emailAccount)){
						console.info('格式正确')
						this.isCorrect=true
						if(this.emailAccount==localStorage.emailInfo){
							this.isCorrect=false
							this.checkMessage='邮箱已被注册'
						}
					}else{
						console.info('格式错误')
						this.isCorrect=false
						this.checkMessage='邮箱格式错误'
					}
				}else{
					this.isCheck=false
				}
			},
			checkPhoneNo(){
				if(this.phoneNumber!=''){
					this.isPhone=true
					if(this.phoneRegular.exec(this.phoneNumber)){
						console.info('格式正确')
						this.isPhoneNo=true
						if(this.phoneNumber==localStorage.phoneNumber){
							this.isPhoneNo=false
							this.phoneMessage='手机号已被使用'
						}
					}else{
						console.info('格式错误')
						this.isPhoneNo=false
						this.phoneMessage='手机号格式错误'
					}
				}else{
					this.isPhone=false
				}
			},
			gotoAddress(path){
			    var self=this
				setTimeout(function(){
					self.$router.push(path)
				},200)
	        },
		}
	}
</script>

<style scoped>
	.impro-info{
		height: 3rem;
		display: flex;
		align-items: center;
		align-content: center;
		background-color: #fff;
		border-bottom: 1px solid #f2f2f2;
	}
	.impro-icon{
		flex: 1;
		display: flex;
		justify-content: center;
	}
	.impro-title{
		flex: 1.5;
		font-size: 1rem;
		margin-left: 5%;
	}
	.impro-input{
		width: 100%;
		height: 100%;
		outline: none;
		border: none;
		font-size: 1rem;
		padding-right: 0.5rem;
		color:#5c5c5c
	}
	.check-prompt{
		display: flex;
		/*justify-content: center;*/
		align-items: center;
		width: 100%;
		height: 100%;
	}
	.jumpBtn{
		color: white !important;
		border-radius: 3px !important;
		height: 2.6rem !important;
		background-color: #3399fe !important;
		width: 90%;
		margin-bottom: 1rem;
	}
</style>